<!-- 表格组件 -->
<template>
	<div class="table_content">
		<div class="table">
				<!-- 表格 -->
				<el-table :data="tableData" v-bind="{...tableConfig}" style="width: 100%">
					<el-table-column
						v-for="(props, key) in columnData"
						:key="key"
						v-bind="{...props}"
					></el-table-column>
				</el-table>
				<!-- 分页器 -->
		</div>
		<div class="pagination">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="current_page"
					:page-sizes="pageSizes"
					:layout="layout" 
					:total="total"
					v-bind="{...paginationConfig}"
					>
				</el-pagination>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
			current_page: 1
		};
  },
  props: {
		// 表格配置
		tableConfig:{
			type:Object,
			default:() => {
				return {}
			}
		},
		// 分页器配置
		paginationConfig:{
			type:Object,
		},
		// 分页器下拉选择页数
		pageSizes:{
			type:Array,
			default:() => {
				return [10,20]
			}
		},
		// 分页器样式
		layout:{
			type:String,
			default:() => {
				return 'total, prev, pager, next'
			}
		},
		// 横列数据
    tableData: {
      type: Array,
      required: true
		},
		// 纵列数据
    columnData: {
      type: Array,
      required: true
		},
		// 总条数
		total:{
			type:Number,
			required:true
		}
  },
  methods: {
		handleSizeChange(val) {
			this.$emit('handleSizeChange',val);
		},
		handleCurrentChange(val) {
			this.$emit('handleCurrentChange',val);
		}
	}
};
</script>
<style lang='scss' scoped>
.table_content {
	display: flex;
	flex-direction: column;
	justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}
</style>